<!--国标服务器选择 -->
<template>
  <div class="topnav-content">
  <div id="gbserverselect" ref="gbserverselect">
    <Select v-model="dbServiceId"
            :placeholder="h5.placeholder" clearable
            @on-clear="onClear"
            @on-change="onChange">
      <Option v-for="item in gbServerList" :value="item.id" :key="item.id">{{ item.name }}</Option>
    </Select>
  </div>
  </div>
</template>
<script>
import {queryGbServerList} from '@/api/gbserver';
import {apiResult} from "@/libs/util";
export default {
  name: "gbServerSelect",

  props: {
    id: {Number, default: () => null}
  },
  model: {
    prop: 'id',//返回值
    event: 'dataSelect' //触发此事件返回值
  },
  watch:{
    /** 传入的数据 */
    id(val){
      this.dbServiceId=val;
    }
  },
  computed:{
    h5(){
      return{
        placeholder:this.$t('gb_server')
      }
    }
  },
  data() {
    return {
      dbServiceId: null,
      gbServerList: [],
    }
  },
  methods: {
    onClear() {
      this.dbServiceId = null;
      this.$emit('dataSelect', this.dbServiceId);
      this.$emit('on-change', null);
    },
    onChange() {
      let row = null;
      for (let i in this.gbServerList) {
        if (this.dbServiceId == this.gbServerList[i].id) {
          row = this.gbServerList[i];
          break;
        }
      }

      this.$emit('dataSelect', this.dbServiceId);
      this.$emit('on-change', row);
    }
  },
  mounted() {
    /** 国标服务器 */
    queryGbServerList().then(res => {
      apiResult(res.data,false,result=>{
        this.gbServerList = result.data;
      });
    });
  },
}
</script>
<style lang="less">
@import "./topnav";
</style>
